<template>
  <div>
    <note-templates :data="stringData" :list="directory">
      <template #note>
        <div id="note-item1">
          <title-card title="安装Nginx" />
          <p>
            安装Nginx会依赖其他软件包，例如pcre，zlib, openssl等，安装命令如下：
          </p>
          <pre-code :code="code1" language="JavaScript" />
          <p>用wget 下载Nginx，解压，编译，安装：</p>
          <pre-code :code="code2" language="JavaScript" />
          <p>
            可能在make的时候会报2个错误，在网上搜一下就解决了。大概记得第一个错误的解决方法是在一个MakeFile中删除-Werror，第二个错误是注释一行代码就可以了。
          </p>
          <p>
            可以用<b>whereis</b>命令查看Nginx安装在哪了，一般会安装到/usr/local/目录下，接下来就启动Nginx，并打开默认页面：
          </p>
          <pre-code :code="code3" language="JavaScript" />
          <p>
            在浏览器地址栏输入阿里云公网ip地址就会看到Nginx默认欢迎页面了。但不幸的是，打不开。
          </p>
          <p>需要做如下配置：</p>
          <ol style="padding-left: 10px">
            <li>
              <p>
                1）改一下Nginx的服务器端口 80改为88，server_name改为公网ip地址
              </p>
              <pre-code :code="code4" language="JavaScript" />
              <p>2）在服务器管理平台手动添加一个端口配置</p>
            </li>
          </ol>
        </div>

        <div id="note-item2">
          <title-card
            title="用xftp把包上传到阿里云服务器Nginx安装目录下的/html目录"
          />
          <p>在xftp新建会话时</p>
          <ol style="padding-left: 10px">
            <li><p>1）主机名填我们开始在服务器公网IP地址</p></li>
            <li><p>2）协议我们选择SFTP</p></li>
            <li><p>3）端口号默认是22，不用修改</p></li>
            <li>
              <p>
                4）用户名和密码填写我的在阿里云服务器设置的，一般用户名在没有修改的情况下都是root。
              </p>
            </li>
            <p>
              如果vue项目build出的包放在/home/dist目录下，那么相应配置文件也需要修改：
            </p>
          </ol>
          <pre-code :code="code5" language="JavaScript" />
        </div>
        <div id="note-item3">
          <title-card title="解决刷新页面出现404错误问题" />
          <p>
            在刷新页面的时候发现出现了404错误，这是Nginx配置有问题，需要增加如下配置：
          </p>
          <pre-code :code="code6" language="JavaScript" />
        </div>
        <div id="note-item4">
          <title-card title="重启云服务器导致访问不了问题" />
          <p>
            在重启云服务器后，启动Nginx，再输入ip + port 结果没有成功加载网页。用命令查看Nginx 也都正常：
          </p>
          <p>ps -ef |  grep nginx   //进程都正常</p>
          <p>netstat -tlnup | grep nginx   //Nginx 也处于listen状态</p>
          <p>这是由于重启后把网络防火墙打开了。所以要关闭防火墙：</p>
          <p>systemctl stop firewalld.service   //关闭防火墙</p>
          <p>systemctl status firewalld.service   //查看防火墙状态</p>
        </div>
      </template>
    </note-templates>
  </div>
</template>

<script setup name="NginxVue">
import NoteTemplates from '@/components/NoteTemplates/index.vue';
import TitleCard from '@/components/TitleCard/index.vue';
import { postArticleDetail } from '@/api/home.js';
import { onMounted, reactive, ref, toRefs } from 'vue';

const code1 = ref(`yum install gcc-c++ 
yum install -y pcre pcre-devel
yum install -y zlib zlib-devel
yum install -y openssl openssl-devel`);

const code2 = ref(`wget -c https://nginx.org/download/nginx-1.12.0.tar.gz
tar -zxvf nginx-1.12.0.tar.gz
cd nginx-1.12.0
./configure
make
make install `);

const code3 = ref(`cd /usr/local/nginx/sbin/
./nginx`);

const code4 = ref(`vim /usr/local/nginx/conf/nginx.conf`);

const code5 = ref(`worker_processes  1;

events {
  worker_connections  1024;
}


http {
  include       mime.types;
  default_type  application/octet-stream;
  keepalive_timeout  65;

  #gzip  on;   

  server {
    listen       80;
    server_name  101.42.51.195;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;

    location / {
      root   /home/dist;
      try_files $uri $uri/ @router;
      index  index.html index.htm;
    }
    #location /doc/ {
    #  proxy_pass http://localhost:81/;
    #}

    location @router {
      rewrite ^.*$ /index.html last;  
    }
  }

  #server {
  #  listen 81;
  #  location / {
  #    root /home/doc/dist;
  #    try_files $uri $uri/ /index.html;
  #    index index.html index.htm;
  #  }
  }

}`);

const code6 = ref(` location / {
    root   html;
    try_files $uri $uri/ @router;  //不加这行刷新页面会出现404错误
    index  index.html index.htm;
  }

  //路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
  //因此需要rewrite到index.html中，然后交给路由再处理请求资源
  location @router {
    rewrite ^.*$ /index.html last;  
  }`);

const directory = ref([
  {
    name: '安装Nginx',
    id: 'note-item1',
  },
  {
    name: '用xftp把包上传到阿里云服务器Nginx安装目录下的',
    id: 'note-item2',
  },
  {
    name: '解决刷新页面出现404错误问题',
    id: 'note-item3',
  },
  {
    name: '重启云服务器导致访问不了问题',
    id: 'note-item4',
  },
]);

const data = reactive({
  stringData: {},
});
const { stringData } = toRefs(data);
const getTitle = () => {
  postArticleDetail({
    route: 'NginxVue',
  }).then((res) => {
    stringData.value = res.data;
  });
};
onMounted(() => {
  getTitle();
});
</script>
